// 导入js-cookie模块 （先安装）
import Cookies from 'js-cookie'
// 定义一个app变量对象
const app = {
  // 定义全局变量状态对象 state
  state: {
    // 全局变量对象
    sidebar: {
      // 获取 侧边栏的状态是什么？ 打开或关闭 ture/false 0/1
      opened: !+Cookies.get('sidebarStatus'),
      // 动画
      withoutAnimation: false
    },
    // 定义一个名叫设备的属性  值为桌面
    device: 'desktop'
  },

  mutations: {   // 他是更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
    // 切换侧边栏
    TOGGLE_SIDEBAR: state => {
      if (state.sidebar.opened) {
        Cookies.set('sidebarStatus', 1)   // Cookies 存储
      } else {
        Cookies.set('sidebarStatus', 0)   //  Cookie 存储
      }
      state.sidebar.opened = !state.sidebar.opened   // 取反
    },
    // 关闭侧边栏
    CLOSE_SIDEBAR: (state, withoutAnimation) => {
      Cookies.set('sidebarStatus', 1)
      state.sidebar.opened = false
      state.sidebar.withoutAnimation = withoutAnimation
    },
    TOGGLE_DEVICE: (state, device) => {
      // debugger
      state.device = device       // desktop
    }
  },
  // Action 类似于 mutation，不同在于：
  // Action 提交的是 mutation，而不是直接变更状态。
  // Action 可以包含任意异步操作。
  // 实践中，我们会经常用到 ES2015 的 参数解构 (opens new window)来简化代码（特别是我们需要调用 commit 很多次的时候）：
  actions: {
    ToggleSideBar: ({ commit }) => {
      commit('TOGGLE_SIDEBAR')
    },
    CloseSideBar({ commit }, { withoutAnimation }) {
      commit('CLOSE_SIDEBAR', withoutAnimation)
    },
    ToggleDevice({ commit }, device) {
      commit('TOGGLE_DEVICE', device)
    }
  }
}

export default app
